<!doctype html>
<html lang="zh-CN">

    <head>
        <!-- 必须的 meta 标签 -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap 的 CSS 文件 -->
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/fonts/fontawesome-webfont.woff">
        <link rel="stylesheet" href="../css/fonts/fontawesome-webfont.woff2">

        <title>交大「江湖令」</title>

        <style>
            html {
                height: 100%;
            }

            body {
                margin: 0;
                height: 100%;
                overflow:hidden;
                background:#b7eee2;
            }

            canvas{
                z-index:-1;
                position:absolute;
            }

            #app {
                width: 100%;
                height: 100%;
                /*定义为一个flex盒子*/
                display: flex;
                /*内部元素按行排列*/
                flex-direction: row;
                min-width: 400px;
                min-height: 400px;
                /* 主轴居中 */
                justify-content: center;
                /* 交叉轴居中 */
                align-items: center;
            }

            form {
                width: 20%;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
                padding: 30px 30px;
                border-radius: 8px;
                min-width: 450px;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <form class="admin.login" style="background-color: white; opacity: 0.95;">
                <div style="text-align: center;margin-bottom:20px;">
                    <img src="./control/assest/images/long_logo.png" style="width: 100%;">
                </div>
                <div class="input-group mb-2 mr-sm-2">
                    <label for="u_opwd">
                        <div class="input-group-prepend">
                            <div class="input-group-text">原始密码</div>
                        </div>
                    </label>
                    <input type="password" class="form-control" id="u_opwd" v-model="user.u_opwd" required />
                </div>
                <div class="input-group mb-2 mr-sm-2">
                    <label for="u_pwd">
                        <div class="input-group-prepend">
                            <div class="input-group-text">新密码</div>
                        </div>
                    </label>
                    <input type="password" class="form-control" id="u_pwd" v-model="user.u_pwd" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" required />
                    <table style="width: 100%; height: 20px; border:1px; border-color: #0f0f0f;">
                        <tr style="background-color: #eeeeee">
                            <td style="width: 33%; " id="strength_L">弱</td>
                            <td width="33%" id="strength_M">中</td>
                            <td width="33%" id="strength_H">强</td>
                        </tr>
                    </table>
                </div>
                <div class="input-group mb-2 mr-sm-2">
                    <label>
                        <div class="input-group-prepend">
                            <div class="input-group-text">确认密码</div>
                        </div>
                    </label>
                    <input type="password" class="form-control" id="u_cpwd" onkeyup="valid()" required>
                    <span id="tishi"></span>
                </div>
                <div style="text-align: center">
                    <button class="btn btn-primary" type="button" @click="updatepwd" style="width: 100%;">确认修改</button>
                </div>
            </form>
        </div>

        <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
        <script src="../js/jquery-3.6.0.slim.min.js"></script>
        <script src="../js/bootstrap.bundle.min.js"></script>
        <script src="../js/vue.global.js"></script>
        <!-- <script src="https://unpkg.com/vue"></script> -->
        <script src="../js/axios.min.js"></script>
        <script src="../js/my-axios.js"></script>
        <script src="../layer/layer.js"></script>
        <script src="../js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
        <script src="../js/Particleground.js" tppabs="js/Particleground.js"></script>

        <script>
            $(document).ready(function() {
                //粒子背景特效
                $('body').particleground({
                dotColor: '#5cbdaa',
                lineColor: '#5cbdaa'
                });
            });

            const app = {
                data() {
                    return {
                        user: {
                            u_id:'',
                            u_opwd:'',      // 原始密码
                            u_pwd: ''      // 密码
                        },
                        loadIdx: null
                    }
                },
                methods: {
                    updatepwd() {
                        this.user.u_id = sessionStorage.getItem("u_id");
                        this.loadIdx = layer.load();
                        myAxios.post('/changepwd', this.user)
                            .then(res => {
                                layer.close(this.loadIdx);
                                if (res.data.success) {
                                    layer.msg('修改密码成功!', {
                                        icon: 1,
                                        time: 800
                                    }, () => {
                                        // 闪完后跳转
                                        window.location.href = '../login.html';
                                    });
                                } else {
                                    layer.msg(res.data.message, {
                                        icon: 2,
                                        time: 1500
                                    });
                                }
                            })
                            .catch(err => {
                                layer.close(this.loadIdx);
                                layer.msg('系统错误！', {icon: 2, time: 800});
                            });
                    }

                },

                //定义回调方法：mounted 该方法在页面渲染完成立即执行
                mounted(){
                }
            };

            // 判断密码强弱
            //CharMode函数
            //测试某个字符是属于哪一类.
            function CharMode(iN)
            {
                if (iN>=48 && iN <=57) //数字
                    return 1;
                if (iN>=65 && iN <=90) //大写字母
                    return 2;
                if (iN>=97 && iN <=122) //小写
                    return 4;
                else
                    return 8; //特殊字符
            }
            //bitTotal函数
            //计算出当前密码当中一共有多少种模式
            function bitTotal(num)
            {
                modes=0;
                for (i=0; i<4; i++)
                {
                    if (num & 1) modes++;
                    num>>>=1;
                }
                return modes;
            }
            //checkStrong函数
            //返回密码的强度级别
            function checkStrong(sPW)
            {
                if (sPW.length<=4)
                    return 0; //密码太短
                Modes=0;
                for (i=0; i<sPW.length; i++)
                {
                    //测试每一个字符的类别并统计一共有多少种模式.
                    Modes|=CharMode(sPW.charCodeAt(i));
                }
                return bitTotal(Modes);
            }
            //pwStrength函数.www.qichepeijian.com
            //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
            function pwStrength(pwd)
            {
                O_color="#eeeeee";
                L_color="#FF0000";
                M_color="#FF9900";
                H_color="#33CC00";
                if (pwd==null||pwd=='')
                {
                    Lcolor=Mcolor=Hcolor=O_color;
                }
                else
                {
                    S_level = checkStrong(pwd);
                    switch(S_level)
                    {
                        case 0:
                            Lcolor = Mcolor = Hcolor = O_color;
                        case 1:
                            Lcolor = L_color;
                            Mcolor = Hcolor = O_color;
                            break;
                        case 2:
                            Lcolor = Mcolor = M_color;
                            Hcolor = O_color;
                            break;
                        default:
                            Lcolor=Mcolor=Hcolor=H_color;
                    }
                }
                document.getElementById("strength_L").style.background=Lcolor;
                document.getElementById("strength_M").style.background=Mcolor;
                document.getElementById("strength_H").style.background=Hcolor;
                return;
            }

            // 验证两次输入密码的一致性
            function valid() {
                var pwd1 = document.getElementById("u_pwd").value;
                var pwd2 = document.getElementById("u_cpwd").value;

                if (pwd1 == pwd2) {
                    document.getElementById("tishi").innerHTML="<font color='green'>两次输入的密码相同</font>";
                    // document.getElementById("submit").disabled = false;
                }
                else {
                    document.getElementById("tishi").innerHTML="<font color='red'>两次输入的密码不相同</font>";
                    // document.getElementById("submit").disabled = true;
                }
            }

            Vue.createApp(app).mount('#app')
        </script>
    </body>

</html>